<template>
	<div class="basic-config">
		<list-title :data="header"></list-title>
		<el-form :model="configForm" :rules="rules" ref="configForm" label-width="200px">
			<el-form-item label="公司名称" prop="data.company_name" style="width: 715px;">
				<div>
					<el-input v-model="configForm.data.company_name" placeholder="公司名称" style="width: 415px;"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="Logo" prop="data.company_logo" style="width: 715px;">
				<div>
					<div style="width: 415px;">
						<div style="width: 220px;">
							<upload-oss 
							:stsdomain="this.$domain.ac" 
							:ossdomain="this.$ossdomain" 
							:limit="3" 
							:fileList="configForm.data.company_logo" 
							:maxSize="20" 
							@insertFile="insertFile"
							@delFile="delFile">
							</upload-oss>
						</div>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="公司介绍" prop="data.company_introduction" style="width: 715px;">
				<div>
					<el-input type="textarea" :rows="5" placeholder="请输入介绍" v-model="configForm.data.company_introduction" style="width: 415px;"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="客服电话" prop="data.company_phone" style="width: 715px;">
				<div>
					<el-input v-model="configForm.data.company_phone" placeholder="客服电话" style="width: 415px;"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="图片鉴定费用" prop="data.photo_auth_cost" style="width: 715px;">
				<div>
					<el-input-number v-model="configForm.data.photo_auth_cost" controls-position="right" :min="0" :max="10000" :step="10"></el-input-number>
				</div>
			</el-form-item>
			<el-form-item label="邮寄鉴定费用" prop="data.mail_auth_cost" style="width: 715px;">
				<div>
					<el-input-number v-model="configForm.data.mail_auth_cost" controls-position="right" :min="0" :max="10000" :step="10"></el-input-number>
				</div>
			</el-form-item>
			<el-form-item label="老师鉴定费用" prop="data.expert_auth_cost" style="width: 715px;">
				<div>
					<el-input-number v-model="configForm.data.expert_auth_cost" controls-position="right" :min="0" :max="10000" :step="10"></el-input-number>
				</div>
			</el-form-item>
			<el-form-item label="备案须知" prop="data.record_info" style="width: 715px;">
				<div>
					<el-input type="textarea" :rows="8" placeholder="请输入备案须知" v-model="configForm.data.record_info" style="width: 650px;"></el-input>
				</div>
			</el-form-item>
			<el-form-item label="注册须知" prop="data.register_info" style="width: 715px;">
				<div>
					<el-input type="textarea" :rows="8" placeholder="请输入注册须知" v-model="configForm.data.register_info" style="width: 650px;"></el-input>
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('configForm')" :disabled='configForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='configForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('configForm')" v-if='configForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import UploadOss from "pc/common/UploadOss"
import {changeToBool, changeUploadFormatBack, judgeAuth} from "static/js/common.js"
import {ERROR} from "static/js/constant.js"
import {mapGetters} from 'vuex'

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '信息配置',
				reload: false,
			},
			/*核心设置数据*/
			configForm: {
				submitLock: false,
				data: {
					company_name: '',
					company_logo: [],
					company_introduction: '',
					company_phone: '',
					photo_auth_cost: '',
					mail_auth_cost: '',
					expert_auth_cost: '',
					record_info: '',
					register_info: ''
				}
			},
			rules: {
				data: {
					company_name: [
						{ required: true, message: '请输入应用名称', trigger: 'blur' },
						{ max: 32, message: '最多 32 个字符', trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		UploadOss
	},
	created: function() {
		/*取出参数*/
		this.getConfig()
	},
	methods: {
		/*取出核心参数*/
		getConfig() {
			if(this.$api.config != undefined){
				this.$get(this.$api.config).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.configForm.data.company_name = res.data.data.company_name
							this.configForm.data.company_logo = changeUploadFormatBack(res.data.data.company_logo)
							this.configForm.data.company_introduction = res.data.data.company_introduction
							this.configForm.data.company_phone = res.data.data.company_phone
							this.configForm.data.photo_auth_cost = res.data.data.photo_auth_cost
							this.configForm.data.mail_auth_cost = res.data.data.mail_auth_cost
							this.configForm.data.expert_auth_cost = res.data.data.expert_auth_cost
							this.configForm.data.record_info = res.data.data.record_info
							this.configForm.data.register_info = res.data.data.register_info
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*核心设置参数*/
		submitForm(formName) {
			if(this.$api.config != undefined){
				if(!this.configForm.submitLock){
					this.$refs[formName].validate((valid) => {
						if (valid) {
							this.configForm.submitLock = true;
							let data = JSON.parse(JSON.stringify(this.configForm.data))
							this.$post(this.$api.config, {
								Config: data
							}).then(res => {
								/*成功*/
								if(res.data.code == 0){
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
							})
							.catch(err => {
								let error = ERROR.SER404
								if(err.response != undefined  && err.response.status == 500){
									error = ERROR.SER500
								}
								this.$message({
									showClose: true,
									message: error,
									type: 'error'
								});
							})
							.finally(() => {
								this.configForm.submitLock = false;
							});
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				}
			}
		},
		/*插入上传的图片*/
		insertPic(list){
			for(let i=0; i<list.length; i++){
				this.configForm.data.company_logo.push(
					{
						name: '',
						url:  list[i].url
					}
				)
			}
		},
		/*删除上传的图片*/
		delPic(index){
			this.configForm.data.company_logo.splice(index, 1)
		},
		/*插入上传的文件*/
		insertFile(file){
			// console.log(file instanceof Array)
			if(file instanceof Array){//如果是数组的话，说明是图片
				for(let i=0; i<file.length; i++){
					this.configForm.data.company_logo.push(
						{
							name: '',
							url:  file[i].url
						}
					)
				}
			}else{//单个文件路径

			}
		},
		/*删除上传的文件*/
		delFile(index){
			if(index >= 0){//图片
				this.configForm.data.company_logo.splice(index, 1)
			}else{//文件路径

			}
		}
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.warning
	color: #8a6d3b
	background-color: #fcf8e3
	border: 1px solid #faebcc
	margin-top: 10px
	padding: 10px
	font-size: 12px
	line-height: 20px
.basic-config
	form
		margin-top: 10px
.r
	float: right
</style>